<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script>
        $().ready(function () {
            $("#pay").click(function () {
                $.ajax({
                    url:"pay",
                    data:{},
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        var myPay=data.code_url;
                        toPay(myPay);
                    }
                })
            })
            var status;
            var payCount=0;
            //查询支付状态
            $("#payCallBack").click(function () {
                $.ajax({
                    url: "payCallBack",
                    data: {},
                    type: 'post',
                    dataType: 'json',
                    success:function (data) {
                        if (data=="1"){
                            alert("已经支付成功！！！")
                            clearInterval(status);
                            $("#aa").modal("hiden")
                        }
                        else {
                            alert("还没支付！！！")
                            payCount=payCount+1;
                            if (payCount>=8){
                                clearInterval(status);
                            }
                            status = setInterval(getResult,8000);
                        }
                    }
                })
            })
        })
        function toPay(myPay) {
            $("#myQrcode").qrcode({text: myPay});
        }
        function getResult() {
            $("#payCallBack").click()
        }
    </script>
</head>
<body>
<button id="pay">立即支付</button>
<div style="text-align: center">
    <div style="text-align: center" id="aa">
        <p2>请付款！！！(付款后自动跳转请稍等！！！)</p2>
        <div id="myQrcode"></div>
    </div>
</div>
<button id="payCallBack">查询支付状态</button>
</body>
</html>